<template>
   <el-card>
        <div slot="header" class="clearfix">
            <h4>新增文档集</h4>
        </div>
        <span style="font-size: 20px">
            <h4>
                <i class="el-icon-edit-outline"></i>
                <span style="margin-left: 10px">基础信息</span>
            </h4>
        </span>
        <el-form :model="addForm" label-width="100px" style="margin: 10px">
          <el-form-item label="名称" required>
              <el-input v-model="addForm.name" placeholder="请输入名称" size="small"></el-input>
          </el-form-item>
          <el-form-item label="描述">
              <el-input v-model="addForm.name" placeholder="请输入描述" type="textarea" :rows="3" size="small"></el-input>
          </el-form-item>
           <el-form-item label="备注">
              <el-input v-model="addForm.name" placeholder="请输入备注" type="textarea" :rows="3" size="small"></el-input>
          </el-form-item>
        </el-form>
        <span style="font-size: 20px">
            <h4>
                <i class="el-icon-edit-outline"></i>
                <span style="margin-left: 10px">文档列表</span>
            </h4>
        </span>
        <div style="margin: 10px">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">添加</el-button>
        </div>
         <el-drawer title="添加接口" :visible.sync="drawerVisible" border direction="rtl" size="50%">
             <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
                <el-form-item label="服务名称：" prop="serviceName">
                    <el-input v-model="queryParams.serviceName" placeholder="服务名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="描述：" prop="name">
                    <el-input v-model="queryParams.name" placeholder="描述" size="small"></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="24" style="text-align: right">
                     <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
                     </el-form-item>
                  </el-col>
                </el-row>
             </el-form>
            <el-table :data="tableData" ref="tableRef" size="mini" border style="width: 95%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" width="55" label="#"></el-table-column>
                <el-table-column prop="serviceName" label="服务名称"></el-table-column>
                <el-table-column prop="name" label="描述"></el-table-column>
                <el-table-column prop="method" label="版本"></el-table-column>
            </el-table>
            <el-pagination
                v-show="total>0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="1"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination-container"
                :total="total">
             </el-pagination>
            <div style="text-align: right;margin-top: 10px;">
                <el-button type="primary" @click="submit" size="small">确定</el-button>
                <el-button @click="drawerVisible = false" size="small">取消</el-button>
            </div>
        </el-drawer>
        <div style="text-align: right;margin-top: 10px;">
            <el-button type="primary" @click="submit" size="small">确定</el-button>
            <el-button @click="drawerVisible = false" size="small">取消</el-button>
        </div>
   </el-card>
</template>

<script>
    export default {
        data() {
            return {
                addForm: {},
                queryParams: {},
                drawerVisible: false,
                total: 0,
                tableData: []
            }
        },
        methods: {
            handleAdd() {
                this.drawerVisible = true;
            },
            submit() {
                if(this.$refs.tableRef.selection.length === 0) {
                    this.$message.warning('请选择数据');
                    return;
                }
            },
            // 搜索
            handleQuery() {
                this.queryParams.current = 1;
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
            handleSizeChange(val) {
                this.queryParams.size = val;
                this.getList();
           },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getList();
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>